<template>
  <el-card shadow="never">
    <div v-loading="loading">
      <el-steps direction="vertical">
        <el-step
          :title="item.nodeName"
          v-for="(item, index) in nodeUsers"
          :key="index"
        >
          <template #description>
            <span
              v-for="(user, userIndex) in item.handleUsers"
              :key="userIndex"
            >
              <span v-if="userIndex > 0 && userIndex < item.handleUsers.length">或 </span>
              <el-button plain  :type="user.id==currentUserId?'primary':'info'" @click="handleUserClick(user)">{{ user.name }}</el-button>
            </span>

            <span v-if="item.readOnlyUsers && item.readOnlyUsers.length > 0" >抄送：</span>
            <span
              v-for="(user, userIndex) in item.readOnlyUsers"
              :key="userIndex"
            >
              <span v-if="userIndex > 0 && userIndex < item.handleUsers.length"
                >或
              </span>
              <el-button plain :type="user.id==currentUserId?'primary':'info'" @click="handleUserClick(user)" >{{ user.name }}</el-button>
            </span>
          </template>
        </el-step>
      </el-steps>
    </div>
  </el-card>
</template>
<script setup>
import { ref, watch, nextTick, computed } from "vue";
import { useWorkTaskStore } from "@/stores/workTask";
import { useAppUserStore } from "@/stores/appUser";

const appUserStore = useAppUserStore();

const currentUserId = computed(() => {
  return !appUserStore.currentUser ? "" : appUserStore.currentUser.id;
})

const loading = ref(false);
const oldFormData = ref("");
const nodeUsers = ref([]);

const props = defineProps({
  taskId: {
    type: String,
    default: "",
  },
  workflowInfo: {
    type: Object,
    default: () => {
      return {
        workflowId: "",
        versionNo: "",
        FormData: "",
      };
    },
  },
  canHandler:
    {
      type: Boolean,
      default: true,
    },
});

watch(
  () => props.taskId,
  () => {
    onTaskIdChange();
  },
  { deep: true }
);

watch(
  () => props.workflowInfo,
  () => {
    onWorkflowInfoChange();
  },
  { deep: true }
);

const workTaskStore = useWorkTaskStore();

const onTaskIdChange = () => {
  if (props.taskId && props.taskId.length > 0) {
    getForecastNodeUsers4Task(props.taskId);
  }
};
const onWorkflowInfoChange = () => {
  if (
    props.workflowInfo.workflowId &&
    props.workflowInfo.workflowId.length > 0
  ) {
    getForecastNodeUsers4Workflow(props.workflowInfo);
  }
};
const getForecastNodeUsers4Workflow = (workflowInfo) => {
  if (oldFormData == workflowInfo.formData) return;
  if(!workflowInfo.workflowId || workflowInfo.workflowId.length==0) return
  oldFormData.value = workflowInfo.formData;
  loading.value = true;
  workTaskStore.getForecastNodeUsers4Workflow(workflowInfo).then((res) => {
    nodeUsers.value = res;
    loading.value = false;
  });
};
const getForecastNodeUsers4Task = (taskId) => {
  loading.value = true;

  workTaskStore.getForecastNodeUsers4Task({ taskId }).then((res) => {
    nodeUsers.value = res;
    loading.value = false;
  });
};

const handleUserClick = (user) => {
  if(!props.canHandler) return
  appUserStore.setCurrentUser({id:user.id,name:user.name});
}

nextTick(() => {
  onWorkflowInfoChange();
  onTaskIdChange();
});

defineExpose({ getForecastNodeUsers4Workflow, getForecastNodeUsers4Task });
</script>
